<template>
  <div>
    <h1>学习scss语法</h1>
    <div class="content">测试</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
//scss中通过$来声明变量
$border: 1px solid rgb(232, 12, 12);
h1 {
  border: $border; //使用变量来设置边框

  font-size: 18px;
}
.content {
  border: $border; //使用变量来设置边框
  $width: 160px; //局部变量，只能作用到当前样式范围内
  font-size: 16px;
  width: $width;
  &::before {
    //&表示父选择器，这里的&就表示.content这个类
    content: "+";
  }
}
</style>
